<template>
	<view class="filterWrapper">
	 <!--<view class="title-padding"></view>-->
		<view class="filterHeader">
			<text class="pd" @tap="back()"></text>
			<text class="title">筛选</text>
			<view class="options">
				<button class="setting" @tap="changeDate()"></button>
			</view>
		</view>
		<view class="filterItem" type="primary" @tap="changeShow('QS_Picekr_date',0)" >
			<text>
				起始日期
			</text>
			<text>
				{{startTime}}
			</text>
		</view>
		<view class="filterItem" type="primary" @tap="changeShow('QS_Picekr_date',1)">
			<text>
				终止日期
			</text>
			<text>
				{{endTime}}
			</text>
		</view>
		<view class="filterItem">
			<text>
				客户名称
			</text>
			<input type="text"  placeholder="客户名称" v-model="ClientName" />
		</view>
		<view class="filterItem">
			<text>
                商品编号
			</text>
			<input type="text"  placeholder="商品编号" v-model="GoodsID" />
		</view>
		<view class="filterItem">
			<text>
				商品名称
			</text>
			<input type="text"  placeholder="商品名称" v-model="GoodsName" />
		</view>
		<QSpicker
		title="请选择日期时间" 
		mode="bottom" 
		type="date" 
		ref="QS_Picekr_date"
		pickerId="date_1" 
		:dataSet="dateSet" 
		showReset
		:autoHide="false"
		contentColor="#33cc33"
		:lineHeight=".05"
		@hideQSPicker="hideQSPicker($event)" @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />
	</view>
</template>

<script>
import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue';
export default {
    components: {
        QSpicker
    },
    data() {
        return {
			dateSet: {
				dateMode: 3,
				dateFormatArray: ['-', '-', ' ', ':', ':']
				
			},
			startAndEndTime:0,
			startTime:0,
			endTime:0,
			dateName:"",
			ClientName:"",
			GoodsID:"",
			GoodsName:"",
		};
    },
	created(){
		let date = new Date();
		this.startTime = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
		this.endTime = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
	},
    methods: {
		custormInput(){
			console.log(this);
		},
		//修改数据
		changeDate(){
			var pages=getCurrentPages(), prevPage=null;
			   if(pages.length>1){
			       prevPage=pages[pages.length-2];
			   }
			var that = this;
			   if(prevPage){
						prevPage.setData({
							startTime : that.startTime,
							endTime : that.endTime,
							curstomName:that.ClientName
						})
			   }
			 uni.navigateBack({
			 	delta:1
			 })
		},
	    back(){
			  uni.navigateBack({
			  	delta:1
			  })
		},
       changeShow(name,type) {
		this.startAndEndTime = type;
       	this.$refs[name].show();
		this.dateName = name;
       },
       showQSPicker(res) {
       	 
       },
       hideQSPicker(res) {
		 
       },
       confirm(res) {
		   if(this.startAndEndTime==0){
			   this.startTime = res.data;
		   }else{
			   this.endTime= res.data;
		   }
		   this.$refs[this.dateName].hide();
       }
    }
};
</script>

<style lang="scss" scoped>
	button::after{border: none;padding: 0px;} 
	page{
		width: 100%;
		height: 100%;
		background: #ebebeb;
	}
	.filterWrapper{
		background: #FFF;
		padding-bottom: 15upx;
	}
	.title-padding {
		height: var(--status-bar-height);
		background: $bb-bg-color;
		box-sizing: content-box;
	}
	.filterHeader{
		width: 100%;
		height: 50px ;
		line-height: 50px ;
		position: relative;
		text-align: center;
		background: $bb-bg-color;
		color: #FFF;
		font-size: 18px;
		background-size: 100%;
		
		.pd{
			display: inline-block;
			position: absolute;
			margin-left: 10px;
			top:30upx;
			left: 0px;
			font-size: 14px;
			width: 40upx;
			height: 40upx;
			background: url(../../static/back.png) no-repeat;
			background-size: 100%;
		}
		.options{
			position: absolute;
			right: 0px;
			top:10px;
			width: 80px;
			display: flex;
		    text-align: right;
			.setting{
				width: 30px;
				height: 30px;
				background: url(../../static/sureFilter.png) no-repeat;
				background-size: 30px;
				border: none;
				margin-left: 90upx;
			
			}
		}
		
	}
	
	.filterItem{
	    height:120upx;
		line-height:120upx;
		background:#FFF;
		display: flex;
		flex-direction: row;
		box-sizing:border-box;
		padding-left:30upx;
		padding-right:30upx;
		font-size:32upx;
		background:#FFF;
		text{
			flex:1;
			&:last-child{
				text-align: right;
			}
		}
		input{
			flex: 1;
			height: 60upx;
			line-height: 60upx;
			margin-top: 50upx;
			border-bottom: 1px solid #ebebeb;
		}
	}
</style>
